<template>
    <div>
        <el-card>
            <div style="display: flex;justify-content: space-between; align-items: center;">
                <div>
                    <el-input placeholder="请输入编码" size="mini" style="width: 305px;">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
                <div style="display: flex; align-items: center;">
                    <el-button size="mini" type="primary">新增</el-button>
                    <el-button size="mini">申请上架</el-button>
                    <el-button size="mini">下架</el-button>

                    <i style=" margin-left: 10px; width: 1px; height: 15px; background-color: #a8a8a8;"></i>
                    <el-button type="text" style="margin-left: 10px;">
                        <i class="el-icon-edit"></i>
                    </el-button>
                    <el-button type="text">
                        <i class="el-icon-edit"></i>
                    </el-button>
                </div>
            </div>
        </el-card>
        <el-card>
            <el-table :data="tableData">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="商品" width="300">
                    <template slot-scope="scope">{{ scope.row.address }}</template>
                </el-table-column>
                <el-table-column label="商品分类" align="center">
                    <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column>
                <el-table-column label="创建时间">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <i :class="scope.row.state === '待上架' ? 'dot' : 'dotone'"></i>
                        {{ scope.row.state }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" v-for="(item, index) in scope.row.font" :key="index" @click="one(item)">
                            <i :class="item.icon"></i>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                state: "待上架",
                font: [
                    {
                        icon: "el-icon-delete",
                    },
                    {
                        icon: "el-icon-delete",
                    }, {
                        icon: "el-icon-delete",
                    }, {
                        icon: "el-icon-delete",
                    }, {
                        icon: "el-icon-delete"
                    }
                ]
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄',
                state: "已上架",
                font: [
                    {
                        icon: "el-icon-delete",
                    },
                    {
                        icon: "el-icon-delete",
                    }, {
                        icon: "el-icon-delete",
                    }
                ]
            }, {
                date: '2016-05-01',
                name: '王小虎',
                state: "待上架",
                address: '上海市普陀区金沙江路 1519 弄',
                font: [
                    {
                        icon: "el-icon-delete",
                    },
                    {
                        icon: "el-icon-delete",
                    }, {
                        icon: "el-icon-delete",
                    }
                ]
            }, {
                date: '2016-05-03',
                name: '王小虎',
                state: "已上架",
                address: '上海市普陀区金沙江路 1516 弄',
                font: [{
                    icon: "el-icon-delete",
                },
                {
                    icon: "el-icon-delete",
                }, {
                    icon: "el-icon-delete",
                }
                ]
            }]
        }
    },
    created() {
        // document.title = '商品列表'
    },
    methods: {
        one(value) {
            console.log(value, '什么类型');
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.el-card__body {
    padding: 10px;

}

.dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #c1c1c1;
}

.dotone {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #84d436;
}
</style>